<!--
 * @Descripttion: 商品详情
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-06 13:51:21
 -->
<template>
  <div class="app-container paddingT50">
    <affix>
      <div class="paddingLR20 clearfix">
        <el-card shadow="never" class="oper-btn-card">
          <div class="clearfix">
            <el-form
              class="fl form-no-bottom"
              :inline="true"
              :model="searchData"
              label-position="left"
              label-width="80px"
              @keydown.enter.native="btnSearch"
            >
              <el-form-item>
                <el-input
                  v-model="searchData.keywords"
                  clearable
                  style="width: 360px"
                  placeholder="按单位名称搜索"
                >
                  <el-button slot="append" icon="el-icon-search" type="primary" :loading="btnLoading.search" @click="btnSearch()" />
                </el-input>
              </el-form-item>
            </el-form>
            <el-button class="fr" type="primary" @click="btnAddData">新增单位</el-button>
          </div>
        </el-card>
      </div>
    </affix>
    <vxe-grid
      ref="table"
      class="grid"
      border
      resizable
      highlight-hover-row
      :edit-config="{trigger: 'click', mode: 'row'}"
      :columns="columnsData"
      :data="tableData.unit"
      :loading="tableLoading.table"
      @edit-closed="onEditClosed"
    />
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.size"
        :page-sizes="[10,20,40]"
        :current-page.sync="pageInfo.page"
        :total="pageInfo.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
    <el-dialog
      v-if="dialogVisible"
      title="新增单位"
      :visible.sync="dialogVisible"
      append-to-body
    >
      <save-unit ref="saveUnit" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="btnLoading.sure" @click="btnSureSaveData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import clonedeep from 'clonedeep'
import SaveUnit from './save-unit'
import Affix from '@/components/Affix'
import { getDelButton } from '@/components/Table/oper-btns.js'
import { listPage, save, delData } from '@/api/goods/unit.js'

export default {
  name: 'UnitList',
  components: { Affix, SaveUnit },
  mixins: [oftenuse],
  props: {
  },
  data() {
    return {
      dialogVisible: false,
      columnsData: [
        { title: '操作', width: 60,
          slots: {
            default: (params) => {
              const { row } = params
              const h = this.$createElement
              const delBtnNode = getDelButton(h, { on: { click: () => { this.btnDelData(row) } }})
              const divNode = h('div', {
                attrs: {
                  class: 'table-oper-btns'
                }
              }, [delBtnNode])
              return [divNode]
            }
          }
        },
        { field: 'name', title: '单位名称', editRender: { name: 'ElInput' }, width: 150 },
        { field: 'status', title: '状态', width: 100,
          cellRender: {
            name: 'ElSwitch',
            props: { activeValue: '1', inactiveValue: '0' },
            events: {
              change: this.onSwitchStatusChange
            }
          }},
        { field: 'remark', title: '备注', editRender: { name: 'ElInput' }}
      ]
    }
  },
  watch: {
  },
  created() {
    this.pageInfo.size = 10
    this.initData()
  },
  destroyed() {
  },
  mounted() {
  },
  methods: {
    btnAddData() {
      this.dialogVisible = true
    },
    btnDelData(row) {
      const params = row.id
      this.$confirm('确定要删除该单位吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delData(params)
      }).catch(() => {
      })
    },
    btnSureSaveData() {
      const saveUnitComp = this.$refs.saveUnit
      const data = saveUnitComp.getData()
      saveUnitComp.handleValid('form').then(_ => {
        this.setBtnLoading('sure', true)
        this.saveData(data).then(_ => {
          this.setBtnLoading('sure', false)
        })
      })
    },
    btnSearch() {
      this.pageInfo.current = 1
      const keywords = this.searchData.keywords
      const params = {
        data: { keywords },
        page: this.pageInfo
      }
      this.setBtnLoading('search', true)
      this.getListData(params).then(res => {
        this.setBtnLoading('search', false)
      })
    },
    // api
    initData() {
      this.getListData()
    },
    getListData(params = { data: {}, page: this.pageInfo }) {
      this.setTableLoading('table', true)
      return listPage(params).then(res => {
        this.setTableLoading('table', false)
        if (!res.data.flag) return
        const { records, total } = res.data.data
        this.setTableData('unit', records)
        this.pageInfo.total = total
      }).catch(_ => {
        this.setTableLoading('table', false)
      })
    },
    saveData(params, refresh = true) {
      return new Promise((resolve, reject) => {
        save(params).then(res => {
          resolve(res)
          if (!res.data.flag) return this.$notify.error({ title: '保存失败！' })
          this.$notify.success({ title: '保存成功！' })
          this.dialogVisible = false
          refresh && this.getListData()
        }).catch(err => {
          reject(err)
          this.$notify.error({ title: '保存异常！', message: err || '' })
        })
      })
    },
    delData(idList) {
      delData(idList).then(res => {
        if (!res.data.flag) return this.$notify.error({ title: '删除失败！', message: res.data.message })
        this.$notify.success({ title: '删除成功！' })
        this.getListData()
      })
    },
    // on
    onSwitchStatusChange(params) {
      const { row } = params
      const data = clonedeep(row)
      data.status = data.status === '0' ? '1' : '0'
      this.saveData(row).then(res => {
        if (res.data.success) {
          this.$set(row, 'status', data.status)
        }
      })
    },
    onEditClosed(params, val) {
      const { row } = params
      this.saveData(row, false)
    },
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
      this.getListData()
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
      this.getListData()
    }
  }
}
</script>

<style scoped>
</style>
